Первоначально я не планировал написания вводного урока, описывающего процесс установки 1С-Битрикс, разбитие шаблона на блоки или какие-то другие вещи, однако в процессе интеграции данного шаблона было обнаружено, что он значительно сложнее по своей структуре, чем показалось на первый взгляд. В связи с этим необходимо сделать небольшое введение и описать как устроен шаблон в 1С-Битрикс и как мы разбиваем свой шаблон на блоки, дабы в будущем избежать этих вопросов.
Шаблон и страница с точки зрения 1С-Битрикс
большинство страниц сайта 1С-Битрикс являются php файлами, в которых можно выделить 3 ключевых части:
Header'а, рабочей области с контентом и Footer'а:
|
<?require($_SERVER["DOCUMENT_ROOT"]."/bitrix/header.php");?>
контент страницы (рабочая область)
<?require($_SERVER["DOCUMENT_ROOT"]."/bitrix/footer.php");?> |
Это определяет структуру шаблона, который фактически состоит из 2 файлов: headre.php и footer.php, между которыми располагается контент или рабочая область страницы.
Естественно при редактировании шаблона через административный интерфейс мы этого не видим, а видим целый код шаблона, внутри которого находится маркер #WORKAREA# - рабочая область для контента страницы, фактически место разрыва меду footer.php и header.php.
Как в шаблоне, так и в рабочей области могут находиться компоненты, текст и включаемые области (которые в свою очередь могут содержать разметку, текст, компоненты и т.п.). Однако в точки зрения удобства работы контент-редакторов (и администраторов) во включаемых областях, и тем более в рабочей области количество html разметки следует снизить до необходимого минимума, а желательно вообще исключить (чтобы редакторы правили только текст).
В рамках данного цикла статей мы рассмотрим пошаговую интеграцию шаблона с этапа html+css вёрстки до готового шаблона 1С-Битрикс со всеми компонентами.
Шаблоны страниц сайта
Отдельно следует упомянуть шаблоны страниц и областей. Сравнительно редко использующийся сейчас функционал по сути своей представляет "заголовки", которые могут содержать разметку и даже демо-контент, используемые при создании новых страниц или включаемых областей.
Естественно все стили, применяемые к данной разметке должны быть описаны в CSS шаблона сайта, а использование шаблонов страниц возможно только в разделах, к которым применён конкретный шаблон сайта (шаблоны страниц хранятся внутри шаблон сайта).
Обычно в их использовании нет нужды, поскольку рабочая область представляет из себя просто оформленный блок, а отдельное оформление используется только у конкретных компонентов (например список элементов торгового каталога может выводиться в 4 колонки, хотя обычно текст оформлен в 1 большой широкий блок) и не требует корректировки контент-редактора. Если же в каких-то разделах используется дополнительный блок, то он реализуется через включаемую область, показывающуюся для конкретных разделов или страниц.
Шаблон сайта Stylish
Я рекомендую всем желающим научиться этому процессу скачать исходные материалы и самостоятельно воспроизводить все действия, описанные в уроках.
Как можно заметить шаблон представляет из себя очень сложную структуру:
- Красный - header.php
- Жёлтый - footer.php
- Зелёный - WorkArea (рабочая область или контент)
- Синий - Может быть отнесено как к headre.php/footer.php, так и к рабочей области, поскольку содержит контент, вероятно используемый только в подразделе. Однако в силу особенностей вёрстки Boottstrap (а мы будем стараться выносить в редактируемые контент-редактором области минимум разметки) и для большей универсальности выгоднее эти области включить в состав включаемых областей в шаблоне (header.php/footer.php)
Светло-голубым размечено разбиение включаемых областей и рабочей области на блоки:
- index - 2+1 - левый блок содержит 2 колонки, правый 1.
- 1 - 2+1
- 2 - 1+2 (левый блок содержит 1 колонку, правый 2) в рабочей области и 2+1 во включаемой области
- 3 - 3 колонки в рабочей области и 4 колонки во включаемой области
- 4 - по 4 колонки в ряд
- 5 - 1+1 левая (левая колонка меньше правой)
- 6 - 2 колонки
- 404 - 1+1 правая (левая колонка больше правой)
ИТОГО получаем 7 типов оформления рабочих областей и страниц с точки зрения разметки (часть из этого богатства, например 4 колонки, будет реализовано компонентами, однако имеет смысл создать все 7 типов шаблонов страниц + 8й дефолтный).
Почему шаблоны страниц, а не шаблоны сайтов или включаемые области?
Каждый разработчик принимает это решение самостоятельно, однако на наш взгляд несколько шаблонов сайтов - дурной тон, если разница между ними в 1-2 блоках.
С другой стороны, использование большого количества включаемых областей затрудняет редактирование контент-редакторами. Файлы включаемых областей существуют только с точки зрения файловой (а не логической) системы сайта и создаваться должны несколько иначе, нежели обычные страницы (например в них нельзя повторно подключать header и footer во избежании рекурсии). Файлы включаемых областей можно найти только по характерному имени файла и это повышает требования к подготовке контент-редакторов (в то время как через логическую структуру человек просто создаёт страницу и не задумывается о её названии).
К сожалению, это решение имеет свою цену - у нас будет много шаблонов страниц, а значит, придётся учить пользователей ими пользоваться (если им предстоит создавать страницы). Так же, мы повышаем риск повреждения вёрстки неосторожным редактором контента, решившим поправить html вёрстку рабочей области (лишний открытый или недостающий закрытый теги могут привести к серьёзным проблемам на уровне всего сайта).
О правильности или ошибочности принятого решения мы узнаем значительно позже, на этапе реализации проекта (и на значительно более позднем уроке), что теоретически может плачевно сказаться на судьбе идеи данного курса. Однако, такова же и цена ошибки на ранних этапах любого проекта - приняв неверное архитектурное решение вы заранее обрекаете проект на провал. Поэтому постарайтесь подойти к проектированию ответственно и не жалеть времени.
| Примечание
Вполне вероятно, в процессе разработки шаблона сайта вы придёте к решению, что часть шаблонов страниц имеет очень узкое применение и реализуете данные стили оформления в рамках конкретных страниц. Однако сейчас на раннем этапе мы действуем не обращая на это внимание.
|
В следующем уроке мы рассмотрим первичную интеграцию статической вёрстки (т.е. просто создадим шаблон содержащий разметку и стили, пока без динамических компонентов).
